---
type: tutorial
title: Crea e passa dati a un layout di blog personalizzato
description: >-
  Tutorial: Crea il tuo primo blog Astro —

  Crea un layout di articoli del blog per i tuoi file Markdown e passagli valori
  frontmatter come props
i18nReady: true
---
import Box from '~/components/tutorial/Box.astro';
import Checklist from '~/components/Checklist.astro';
import PreCheck from '~/components/tutorial/PreCheck.astro';
import { Steps } from '@astrojs/starlight/components';
import Badge from "~/components/Badge.astro"

Ora che hai un layout per le tue pagine, è il momento di aggiungere un layout per gli articoli del blog!

<PreCheck>
  - Crea un nuovo layout di articoli del blog per i tuoi file Markdown
  - Passa valori frontmatter YAML come props al componente layout
</PreCheck>

## Aggiungi un layout ai tuoi articoli del blog

Quando includi la proprietà frontmatter `layout` in un file `.md`, tutti i tuoi valori YAML frontmatter sono disponibili per il file layout.

<Steps>
1. Crea un nuovo file in `src/layouts/MarkdownPostLayout.astro`

2. Copia il seguente codice in `MarkdownPostLayout.astro`

    ```astro title="src/layouts/MarkdownPostLayout.astro"
    ---
    const { frontmatter } = Astro.props;
    ---
    <meta charset="utf-8" />
    <h1>{frontmatter.title}</h1>
    <p>Scritto da {frontmatter.author}</p>
    <slot />
    ```

3. Aggiungi la seguente proprietà frontmatter in `post-1.md`

    ```markdown title="src/pages/posts/post-1.md" ins={2}
    ---
    layout: ../../layouts/MarkdownPostLayout.astro
    title: 'Il mio primo articolo del blog'
    pubDate: 2022-07-01
    description: 'Questo è il primo articolo del mio nuovo blog Astro.'
    author: 'Studente Astro'
    image:
        url: 'https://docs.astro.build/assets/rose.webp'
        alt: 'Il logo di Astro su uno sfondo scuro con un bagliore rosa.'
    tags: ["astro", "blogging", "imparare in pubblico"]
    ---
    ```

4. Controlla di nuovo l'anteprima del tuo browser su `http://localhost:4321/posts/post-1` e nota cosa ha aggiunto il layout alla tua pagina.

5. Aggiungi la stessa proprietà layout ai tuoi altri due articoli del blog `post-2.md` e `post-3.md`. Verifica nel tuo browser che il tuo layout sia applicato anche a questi articoli.
</Steps>

:::tip
Quando usi i layout, ora hai la possibilità di includere elementi, come un titolo di pagina, nel contenuto Markdown o nel layout. Ricorda di ispezionare visivamente l'anteprima della tua pagina e apportare le modifiche necessarie per evitare elementi duplicati.
:::

<Box icon="puzzle-piece">

## Prova tu stesso - Personalizza il tuo layout di articoli del blog

**Sfida**: Identifica gli elementi comuni a ogni articolo del blog e usa `MarkdownPostLayout.astro` per renderizzarli, invece di scriverli nel tuo Markdown in `post-1.md` e in ogni futuro articolo del blog.

Ecco un esempio di refactoring del tuo codice per includere `pubDate` nel componente layout invece di scriverlo nel body del tuo Markdown:

```markdown title="src/pages/posts/post-1.md" del={1}
Pubblicato il: 2022-07-01

Benvenuto nel mio _nuovo blog_ sull'apprendimento di Astro! Qui, condividerò il mio percorso di apprendimento mentre costruisco un nuovo sito web.
```

```astro title="src/layouts/MarkdownPostLayout.astro" ins={6}
---
const { frontmatter } = Astro.props;
---
<meta charset="utf-8" />
<h1>{frontmatter.title}</h1>
<p>Pubblicato il: {frontmatter.pubDate.toString().slice(0,10)}</p>
<p>Scritto da {frontmatter.author}</p>
<slot />
```

Esegui il refactoring di quanto ritieni utile per te e aggiungi quanto vuoi al tuo layout, ricordando che tutto ciò che aggiungi al tuo layout è una cosa in meno che scriverai in ogni singolo articolo del blog!

Ecco un esempio di layout refactorizzato che lascia solo il contenuto individuale dell'articolo del blog renderizzato dallo slot. Sentiti libero di usarlo, o crea il tuo!

```astro title="src/layouts/MarkdownPostLayout.astro"
---
const { frontmatter } = Astro.props;
---
<meta charset="utf-8" />
<h1>{frontmatter.title}</h1>
<p>{frontmatter.pubDate.toString().slice(0,10)}</p>
<p><em>{frontmatter.description}</em></p>
<p>Scritto da: {frontmatter.author}</p>
<img src={frontmatter.image.url} width="300" alt={frontmatter.image.alt} />
<slot />
```
</Box>

:::note[Evita la duplicazione]
 Qualsiasi cosa renderizzata dal tuo layout **non** ha bisogno di essere digitata nel tuo articolo del blog! Se noti qualche duplicazione quando controlli l'anteprima del tuo browser, allora assicurati di rimuovere il contenuto dal tuo file Markdown.
:::



<Box icon="question-mark">

### Metti alla prova le tue conoscenze
Riesci a capire cosa dovrebbe andare negli spazi vuoti in modo che i seguenti due componenti insieme producano codice Astro funzionante?

1.  ```markdown title="src/pages/posts/learning-astro.md"
    ---
    layout: ../../__________/MyMarkdownLayout.astro
    title: "Imparare su Markdown in Astro"
    author: Studente Astro
    ____: 2022-08-08
    ---
    Oggi ho imparato così tanto! Astro mi permette di scrivere in Markdown, ma anche di usare variabili dal frontmatter. Posso persino accedere a quei valori in un componente layout Astro.
    ```

2.  ```astro title="src/layouts/MyMarkdownLayout.astro"
    ---
    import ____________ from '../components/Footer.astro'
    const { ___________ } = Astro.props
    ---
    <h1>{frontmatter.title}</h1>
    <p>Scritto da: {frontmatter.______} il {frontmatter.pubDate}</p>
    < _______ />
    <Footer />
    ```
    <details>
        <summary>Mostra gli spazi vuoti riempiti!</summary>

        1.  ```markdown title="src/pages/posts/learning-astro.md" "layouts" "pubDate"
            ---
            layout: ../../layouts/MyMarkdownLayout.astro
            title: "Imparare su Markdown in Astro"
            author: Studente Astro
            pubDate: 2022-08-08
            ---
            Oggi ho imparato così tanto! Astro mi permette di scrivere in Markdown, ma anche di usare variabili dal frontmatter. Posso persino accedere a quei valori in un componente layout Astro.
            ```

        2.  ```astro title="src/layouts/MyMarkdownLayout.astro" " Footer " " frontmatter " "author" "slot"
            ---
            import Footer from '../components/Footer.astro'
            const { frontmatter } = Astro.props
            ---
            <h1>{frontmatter.title}</h1>
            <p>Scritto da: {frontmatter.author} il {frontmatter.pubDate}</p>
            <slot />
            <Footer />
            ```
    </details>
</Box>

<Box icon="check-list">

## Checklist

<Checklist>
- [ ] Posso aggiungere una proprietà layout a un articolo del blog Markdown nel suo frontmatter YAML.
- [ ] Posso creare un layout separato per gli articoli Markdown.
- [ ] Posso usare valori dal frontmatter di un articolo del blog in un componente layout.
</Checklist>

</Box>

### Risorse

- [Layout Markdown in Astro](/it/guides/markdown-content/#frontmatter-layout-property)

- [Props Layout Markdown](/it/basics/layouts/#proprietà-per-il-layout-markdown)

- [Introduzione a YAML](https://dev.to/paulasantamaria/introduction-to-yaml-125f) <Badge class="neutral-badge" text="external" />
